<template>
	<div :class="['legalPersonBox','settleInfoBox', {'mt40': !isShow}]">
		<div class="settleContItem">
			<p class="title" v-show="isShow">企业法人信息</p>
			<Form ref="settleForm" :model="settleForm" :rules="legalPersonValidate" :label-width="150" label-position="left">
                <FormItem label="法人姓名" prop="legalPerson" class="InputMarginR">
                    <Input v-model.trim="settleForm.legalPerson" size="large" placeholder="请输入法人身份证的姓名"></Input>
                </FormItem>
                <FormItem label="法人身份证号" prop="IDNumber">
                    <Input v-model.trim="settleForm.IDNumber" size="large" :maxlength="18" placeholder="请输入法人身份证的身份证号"></Input>
                </FormItem>
                <FormItem label="法人联系手机号" prop="legalMobile">
                    <Input v-model.trim="settleForm.legalMobile" :maxlength="11" placeholder="请输入法人联系手机号"></Input>
                </FormItem>
                <FormItem label="法人身份证正面" prop="idfront" class="imgBoxForm">
	                <Input v-model="settleForm.idfront" class="InputNone"></Input>
                    <upload-img @getPhoto="getIdfront" ref="imgUpload" :imgList="imgListF"></upload-img>
                    <zoomImg style="width: 120px; height: 80px; display: inline-block" :width="70" :ml="-35" :source="1" :imgWidth="'120px'" :imgId="'static/images/settle/idCardFront.png'" :title="'法人身份证正面'"></zoomImg>
                    <!-- <img src="static/images/settle/idCardFront.png"> -->
                </FormItem>
                <FormItem label="法人身份证反面" prop="idback" class="imgBoxForm">
	                <Input v-model="settleForm.idback" class="InputNone"></Input>
                    <upload-img @getPhoto="getIdback" ref="imgUpload1" :imgList="imgListB"></upload-img>
                    <!-- <img src="static/images/settle/idCardBack.png"> -->
                    <zoomImg style="width: 120px; height: 80px; display: inline-block" :width="70" :ml="-35" :source="1" :imgWidth="'120px'" :imgId="'static/images/settle/idCardBack.png'" :title="'法人身份证正面'"></zoomImg>
                </FormItem>
            </Form>
		</div>
	</div>
</template>
<script type="text/javascript">
	import UploadImg from "components/commons/UploadImg";
	import zoomImg from "./zoomImg";
	export default {
	 	components: { UploadImg, zoomImg },
	 	props: {
		 	settleForm: {  
			    type: Object
			},
			isShow: {
				type: Boolean,
				default: false
			},
			imgListF: {
				type: Array
			},
			imgListB: {
				type: Array
			}
	 	},
	 	data() {
	 		const validateIdCard = (rule, value, callback) => {
                if(!this.$utils.RegexUtils('IDNUMBER',value)) {
                    callback(new Error('请输入有效的身份证号'));
                }else{
                    callback();
                }
            };
            const validateMobile = (rule, value, callback) => {
                if(!this.$utils.RegexUtils('MOBILE',value)) {
                    callback(new Error('请输入有效的联系手机号'));
                }else{
                    callback();
                }
            };
	 		return {
	 			legalPersonValidate: {
	 				legalPerson: [{ required: true, message: '请输入法人身份证的姓名', trigger: 'blur' }],
                    IDNumber: [
	                    { required: true, message: '输入法人身份证的身份证号',max: 18, trigger: 'blur' },
                    	{ validator: validateIdCard, trigger: 'blur'}
                    ],
                    legalMobile: [
                    	{ required: true, message: '请输入法人联系手机号',max: 11, trigger: 'change' },
                    	{ validator: validateMobile, trigger: 'blur'}
                    ],
                    idfront: [{ required: true, message: '请上传法人身份证照片正面', trigger: 'change' }],
                    idback: [{ required: true, message: '请上传法人身份证照片反面', trigger: 'change' }]
	 			}
	 		}
	 	},
	 	methods: {
	 		validateFun() {
	 			let hasError = 0;

	 			for(let k in this.legalPersonValidate){
 					console.log(k)
					this.$refs.settleForm.validateField(k, (tips) => {
	                    if (tips) {
	                    	console.log(tips)
	                    	hasError++;
	                    }
                	})
	 			}
	 			console.log(hasError)
	 			if(hasError == 0){
	 				this.$emit("ItemProgress",'ok')
	 			}
	 		},
	 		getIdfront(id) {
	 			this.settleForm.idfront = id;
	 		},
	 		getIdback(id) {
	 			this.settleForm.idback = id;
	 		}
	 	}
	 }
</script>
<style lang="less" rel="stylesheet/less">
.legalPersonBox {
	.settleContItem {
		text-align: left;
		.ivu-form-item,
		.ivu-input[type="text"] {
			width: 500px;
		}
		.ivu-form-item:nth-child(odd) {
			margin-right: 136px;
		}
	}
}
</style>